{$layout}

{$var "header"}
<script src="/js/autocomplete.vue.js" type="text/javascript"></script>
{$end}

<div>
    {$template "menu"}

    <form class="ui form" data-tea-action="/proxy/update" data-tea-success="submitSuccess">
        <input type="hidden" name="server" :value="proxy.filename"/>
        <table class="ui table selectable definition">
            <tr>
                <td class="title">代理服务名称</td>
                <td>
                    <input type="text" name="description" v-model="proxy.description" maxlength="100"/>
                    <p class="comment">给此服务起一个易懂的名称</p>
                </td>
            </tr>
            <tr>
                <td class="title">是否开启HTTP</td>
                <td>
                    <div class="ui checkbox">
                        <input type="checkbox" name="httpOn" value="1" v-model="proxy.http"/>
                        <label></label>
                    </div>
                </td>
            </tr>
            <tr>
                <td>域名<em>(name)</em></td>
                <td colspan="2">
                    <span class="ui label small" v-for="(name, arrayIndex) in proxy.name">{{name}}
                        <input type="hidden" name="name" :value="name"/>
                        <a href="" @click.prevent="removeName(arrayIndex)" title="删除"><i class="icon remove"></i></a>
                    </span>
                    <div class="ui fields inline" v-if="nameAdding" style="margin-top:0.8em">
                        <div class="ui field">
                            <input type="text" name="addingNameName" style="width:16em" maxlength="100" placeholder="域名，比如example.com" @keyup.enter="confirmAddName()" @keypress.enter.prevent="1" v-model="addingNameName" />
                        </div>
                        <div class="ui field">
                            <button class="ui button" type="button" @click="confirmAddName()">确定</button>
                            &nbsp; <a href="" @click.prevent="cancelNameAdding()">取消</a>
                        </div>
                    </div>
                    <div class="ui field" style="margin-top: 1em">
                        <button class="ui button" type="button" @click="addName()">+</button>
                    </div>
                    <p class="comment">用户可以访问的域名，可以使用星号通配符（*）来表示匹配一组域名，比如www.example.com *.google.com</p>
                </td>
            </tr>
            <tr>
                <td>绑定地址<em>(listen)</em></td>
                <td colspan="2">
                    <span class="ui label small" v-for="(listen, arrayIndex) in proxy.listen">{{listen}}
                        <input type="hidden" name="listen" :value="listen"/>
                        <a href="" @click.prevent="removeListen(arrayIndex)" title="删除"><i class="icon remove"></i></a>
                    </span>
                    <div class="ui fields inline" v-if="listenAdding" style="margin-top:0.8em">
                        <div class="ui field">
                            <input type="text" name="addingListenName" style="width:18em" maxlength="30" placeholder="绑定的网络地址，比如 0.0.0.0:80" @keyup.enter="confirmAddListen()" @keypress.enter.prevent="1" v-model="addingListenName" />
                        </div>
                        <div class="ui field">
                            <button class="ui button" type="button" @click="confirmAddListen()">确定</button>
                            &nbsp; <a href="" @click.prevent="cancelListenAdding()">取消</a>
                        </div>
                    </div>
                    <div class="ui field" style="margin-top: 1em">
                        <button class="ui button" type="button" @click="addListen()">+</button>
                    </div>
                    <p class="comment" style="padding-bottom:0;margin-bottom:0.4em">绑定的服务器端的网络地址，多个地址之间使用空格隔开，比如"0.0.0.0:80 192.168.1.100:8080"。</p>
                    <p class="comment" style="padding-top:0;margin-top:0">要想通过服务器的所有IP地址都能访问到服务，可以将IP地址写成"0.0.0.0:端口"。</p>
                </td>
            </tr>

            <!-- 文档根目录 -->
            <tr>
                <td>文档根目录<em>(root)</em></td>
                <td>
                    <auto-complete-path-box name="root" placeholder="类似于 /home/www" :value="proxy.root" maxlength="100"></auto-complete-path-box>
                    <p class="comment">可以访问此根目录下的静态资源</p>
                </td>
            </tr>

            <!-- 字符编码 -->
            <tr>
                <td>字符编码<em>(charset)</em></td>
                <td>
                    <select name="charset" class="ui dropdown" v-model="proxy.charset">
                        <optgroup label="常用"></optgroup>
                        <option :value="charset.charset" v-for="charset in usualCharsets">{{charset.charset}} （{{charset.name}}）</option>
                        <optgroup label="所有"></optgroup>
                        <option :value="charset.charset"  v-for="charset in charsets">{{charset.charset}} （{{charset.name}}）</option>
                    </select>
                </td>
            </tr>

            <!-- 首页文件 -->
            <tr>
                <td>首页文件<em>(index)</em></td>
                <td>
                    <span class="ui label small" v-for="(index, arrayIndex) in proxy.index">{{index}}
                        <input type="hidden" name="index" :value="index"/>
                        <a href="" @click.prevent="removeIndex(arrayIndex)" title="删除"><i class="icon remove"></i></a>
                    </span>

                    <div class="ui fields inline" v-if="indexAdding" style="margin-top:0.8em">
                        <div class="ui field">
                            <input type="text" name="addingIndexName" style="width:16em" maxlength="10" placeholder="首页文件名，比如 index.php" @keyup.enter="confirmAddIndex()" @keypress.enter.prevent="1" v-model="addingIndexName" />
                        </div>
                        <div class="ui field">
                            <button class="ui button" type="button" @click="confirmAddIndex()">确定</button>
                            &nbsp; <a href="" @click.prevent="cancelIndexAdding()">取消</a>
                        </div>
                    </div>
                    <div class="ui field" style="margin-top: 1em">
                        <button class="ui button" type="button" @click="addIndex()">+</button>
                    </div>
                </td>
            </tr>
        </table>

        <button class="ui button primary" type="submit">保存</button>
    </form>
</div>